<template>
    <div class="dia">
        <div class="mask"></div>
        <div class="info">
            <p class="title">您还没有填写收货地址，请填写</p>
            <div class="user clearfix">
                <div class="input-border left">
                    <input type="text"
                           placeholder="姓名" v-model="userName">
                </div>
                <div class="left">
                    <input type="number"
                           placeholder="手机号码"
                           v-model="phone"
                           >
                </div>    
            </div>
            <div class="input-add clearfix" @click="selectCom"><p class="left">{{selectPart}}</p> <img src="../assets/img/arrow.png" alt="" class="right"></div>
            <div class="input-add2"><input type="text" placeholder="请填写详细接到地址" v-model="addr"></div>
            <p id="btn-ok" @click="submitHandle">确定</p>
        </div>
    </div>
</template>
<script>
import hub from '../hub.js'
export default {
    data(){
        return{
            userName:'樱桃小丸子',
            phone:18845555555,
            selectPart:'选择所在区域',
            addr:''
        }
    },
    methods:{
        submitHandle(){
            hub.$emit('submit-info',[this.userName,this.phone,this.selectPart,this.addr]);
        },
        selectCom(){
            hub.$emit('comm',2);
        }
    },
    created(){
        hub.$on('dia2dia',(txt)=>{
            this.selectPart=txt.name;
        })
    }
}
</script>
<style lang="scss" scope>
$pink:#f13160;
$color8:#888888;
$colorbe:#bebebe;
.dia {
    margin-bottom: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 4;
    .mask {
        background-color: #515151;
        position: absolute;
        opacity: 0.8;
        height: 100%;
        width: 100%;
        z-index: 2;
    }
    .info {
        position: relative;
        background-color: #ffffff;
        width: 8.8rem;
        height: 7.52rem;
        top: 50%;
        left: 50%;
        margin-left: -4.4rem;
        margin-top: -3.76rem;
        border-radius: 0.2rem;
        z-index: 10;
        .title {
            height: 1.44rem;
            line-height: 1.44rem;
            font-size: 0.4rem;
            text-align: center;
        }
        .user {
            height: 1.12rem;
            border-top: 0.013333333333333334rem solid $colorbe;
            border-bottom: 0.013333333333333334rem solid $colorbe;
            .input-border {
                width: 4.4rem;
                height: 1.12rem;
                border-right: 0.013333333333333334rem solid $colorbe;
            }
            input{
                margin-left:0.4266666666666667rem;
                border-style: none;
                margin-top:0.32rem;
                width: 3.6rem;
                font-size: 0.3466666666666667rem;
                color:$color8;
            }
        }
        .input-add,
        .input-add2 {
            height: 1.12rem;
            line-height: 1.12rem;
            font-size: 0.3466666666666667rem;
            border-bottom: 0.013333333333333334rem solid $colorbe;
            p,input{
                border-style: none;
                margin-left:0.4266666666666667rem;
            }
            img{
                margin-right: 0.36rem;
                margin-top:0.26666666666666666rem;
            }
        }
    }
    #btn-ok {
        position: absolute;
        height: 1.3333333333333333rem;
        line-height: 1.3333333333333333rem;
        border-bottom-left-radius: 0.2rem;
        border-bottom-right-radius: 0.2rem;
        font-size: 0.4rem;
        text-align: center;
        width: 100%;
        bottom: 0;
        background-color: $pink;
        color: #ffffff;
    }
}
</style>